<template>
  <view class="container" v-if="isShow">
    <view class="box" :style="boxStyle">
      <view class="title"></view>
      <view class="fudai">
        <view class="fudai-icon">
          <image :src="imageUrl+'/dacu/fudai.png'"></image>
        </view>
      </view>
      <view class="button" @click="claimPoints()"></view>
    </view>
    <view class="box2" :style="box2Style">
      <view class="box2-title">获得{{ integral }}积分</view>
      <view class="box2-msg">{{ copywriting }}</view>
      <view class="box2-button" @click="toSindex()"></view>
      <view class="box2-cole" @click="toSindex()"></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      imageUrl: 'https://wechat-pictures-1301970825.file.myqcloud.com/wxapp',
      boxStyle: "",
      box2Style: "",
      productType: this.$productType,
      integral: "",
      copywriting: ""
    };
  },
  methods: {
    // 领取积分
    async claimPoints() {
      //领取积分
      this.$emit("successMp3")
      this.boxStyle = "transform: scale(0);width: 0rpx;height: 0rpx;"
      let data = {productType: this.productType}
      let url = "/tag/bigsales/receiveBag"
      const res = await this.$javaApiTag.doRequest("post", url, data, 'json', false)
      this.integral = res.data.data.integral
      this.copywriting = res.data.data.copywriting
      this.box2Style = "transform: scale(1);width: 667rpx;height: 725rpx;"
    },
    show() {
      this.isShow = true
      setTimeout(() => {
        this.boxStyle = "transform: scale(1)"
      }, 300)
    },
    //隐藏弹框
    hide() {
      this.isShow = false
    },
    toSindex() {
      uni.setStorageSync("indexMessage", true)
      uni.switchTab({url: '/pages/sindex/index'})
    },
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0);
  transition: transform .3s linear;
}

.title {
  width: 450upx;
  height: 52upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/dacu/test_biaoti.png");
  background-size: 100% 100%;
}

.fudai {
  width: 608upx;
  height: 556upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/dacu/bg_hongbao.png");
  background-size: 100% 100%;
  margin-top: 80upx;
}

.fudai-icon {
  width: 370upx;
  height: 424upx;
  margin: 0 auto;
  animation: fudai .5s forwards alternate infinite;

}

@keyframes fudai {
  0% {
    width: 380upx;
    height: 434upx;
    transform: rotate(-10deg);
  }
  50% {
    width: 370upx;
    height: 424upx;
  }
  100% {
    width: 380upx;
    height: 434upx;
    transform: rotate(10deg);
  }
}

.fudai-icon image {
  width: 100%;
  height: 100%;
}

.button {
  width: 338upx;
  height: 102upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/dacu/tab_lijilingqu.png");
  background-size: 100% 100%;
  margin-top: -50upx;
}

.box2 {
  width: 0upx;
  height: 0upx;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0);
  transition: transform .3s linear;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/dacu/tankuang_bg.png");
  background-size: 100% 100%;
  box-sizing: border-box;
  padding-top: 228upx;
  position: relative;
}

.box2-title {
  width: 100%;
  text-align: center;
  font-size: 64upx;
  color: #FA701E;
  font-weight: 600;
}

.box2-msg {
  width: 494upx;
  height: 170upx;
  box-shadow: inset 0upx 0upx 26upx 0upx rgba(186, 107, 37, 0.28);
  border-radius: 8upx;
  margin: 0 auto;
  margin-top: 38upx;
  text-align: center;
  font-size: 40upx;
  color: #888888;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.box2-button {
  width: 474upx;
  height: 124upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/dacu/tankuang_tab_sure.png");
  background-size: 100% 100%;
  margin: 0 auto;
  margin-top: 33upx;
}

.box2-cole {
  width: 128upx;
  height: 119upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/dacu/tankuang_tab_cloes.png");
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  bottom: -110upx;
  transform: translate(-50%, 0%);
}

</style>
